<template>
    <div id="tmpl">
      <div id="comment">
        <h3>提交评论</h3>
        <hr>
        <textarea placeholder="请输入评论内容..." v-model="content"></textarea>
        <mt-button size="large" type="primary" @click="postData()">提交</mt-button>
      </div>
      <hr>
        <div class="title">
            评论列表
        </div>
      <div v-for="(item,index) in list">
        <ul class="mui-table-view">第{{index+1}}楼  用户：匿名用户
          <li class="mui-table-view-cell">{{item.content}}</li>
        </ul>
      </div>
    </div>
</template>

<script>


  import {Toast} from 'mint-ui'
    export default{
        props:['id'],
      data(){
            return{
                content:'',
              list:[],
            }
      },
      mounted(){
        this.id=this.$route.params.id;
        this.getData()
      },
      methods: {
        getData(){

          this.$http.get('/api/getComment',{params:{
            cId:this.id
          }}).then(res => {
            this.list = res.data;
          })


        },

        postData(){
          if (this.content.trim().length == 0) {
            Toast('评论不能为空');
            return;
          }
          this.$http.post('/api/comment/' + this.id, {
            content: this.content,
          }, {params: {cId: this.id}}).then(res => {
            console.log(res);
            Toast('成功提交');
            this.list=[{"content":this.content}].concat(this.list);
            this.content = '';
          })
        },

      }
    }
</script>

<style scoped>
#comment{
  padding: 5px;
  margin-top: 50px;
}
  .title{
    background-color: rgba(0,0,0,0.1);
    padding: 5px;
  }
</style>
